<template>
  <div>
    <!--  <filterTitle @query="query" @reset="Reset">
      <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="130px">
        <el-form-item :label="item.label+'：'" v-for="(item, index) in formData" :key="index" :rules="rules[item.id]" :prop="item.id">
          <LsdForm :compData="item" :form="form" />
        </el-form-item>
      </el-form>
    </filterTitle> -->
    <el-form :data="formData" :inline="true" :model="form" class="demo-form-inline" size="small"
      style="display: flex; justify-content: space-between;">
      <div>
        <el-form-item label="省/地/县：">
          <el-select v-model="form.publishLevel" placeholder="请选择">
            <el-option v-for="(item, index) in diqu_options" :key="index" :label="item.name" :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件类别：">
          <el-select v-model="form.eventCode" placeholder="请选择">
            <el-option v-for="(item, index) in formData[1].options" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item style="margin-right: 0;">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="plain" @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" border
      :header-cell-style="{ background: '#B1C8F9', color: '#000000', border: '1px solid #ccc' }">
      <el-table-column prop="publishName" label="" width="40" align="center">
        <template slot-scope="scope">
          <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="publishName" label="省/地/县" width="180" align="center">
      </el-table-column>
      <el-table-column prop="eventName" label="事件类别" width="100" align="center">
      </el-table-column>
      <el-table-column prop="userInfo" label="到岗到位人员" align="left">
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div style='display: inline-block; letter-spacing: 2px;margin-right:2px'>共{{ total }}条数据,共{{ calcNum(total) }}页
      </div>
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="pageSize"
        layout="prev, pager, next" :total="total" background>
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {
  getPersonsApi
} from "@/api/EmergencyDisposal/dgdw.js";
import { getDictByGroupEmergency } from "@/api/common.js";

export default {
  name: "Persons",
  data() {
    return {
      formData: [
        {
          elType: "select",
          id: "publishLevel",
          label: "省/地/县",
          attrs: {
            value: "",
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: [

          ]
        }, {
          elType: "select",
          id: "eventCode",
          dic: "dic_sjlb",
          label: "事件类别",
          attrs: {
            value: "",
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        }
      ],
      form: {
        "publishLevel": "",
        "eventCode": ""
      },
      diqu_options: [
        {
          name: "省级公司",
          val: 1
        },
        {
          name: "地市公司",
          val: 2
        }
      ],
      tableData: [],
      radio: "",
      rules: {
        name: [
          { required: true, message: "请选择应急事件/响应命令", trigger: "blur" }
        ]
      },
      pageSize: 10,
      pageNum: 1,
      total: 0
    };
  },
  created() {
    this.getPersons();
    this.getOptionsByDict();
  },
  methods: {
    // 获取筛选项
    getOptionsByDict() {
      this.formData.forEach(item => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
    },
    // 获取人员选择列表
    async getPersons() {
      const res = await getPersonsApi({ ...this.form, pageNum: this.pageNum });
      this.tableData = res.data;
      this.total = res.total;
    },
    getCurrentRow(row) {
      this.$emit("select", row);
    },
    query() {
      this.getPersons();
    },
    Reset() {
      this.form = this.$options.data().form;
      this.pageNum = 1;
      this.getPersons();
    },
    // 计算分页页数
    calcNum(val) {
      if (val < 10) {
        return 1;
      } else {
        return Math.ceil(val / 10);
      }
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getPersons();
    }
  }
};
</script>

<style lang='less' scoped>
@import "../../../../assets/style/ComponentStyle.less";
// .el-form {
//   display: flex;
//   justify-content: space-around;
// }

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
}
</style>
